<template>
    <div style="height:850px">
        <div>
            <van-nav-bar
            title="商品详情"
            left-text="返回"
            left-arrow
            @click-left="$router.go(-1)"
            />   
        </div>

        <div> 
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="img in imgs" :key="img.id">
                    <img :src="img.imgUrl" width="100%" style="display:block"/>
                </van-swipe-item>
                
            </van-swipe>
        </div>

        

        <div class="yanse">
            <span style="color: red;"><b>￥：{{ goods.price }}</b></span>
            <br> 
            <span><b>{{ goods.name }}</b></span> &nbsp;&nbsp;&nbsp;
            <span><b>{{ goods.size }}</b></span>
        </div>

        

        <div class="yanse"> 
            <br>
            <span><b>配送</b></span>&nbsp;&nbsp;&nbsp;最快30分钟送达
            <van-notice-bar
                left-icon="volume-o"
                text="优惠券：满39减2元，满59减5元，满79减8元,满99元减15元"
            />
        </div>

        <div class="yanse" style="height:270px">
            <div> 
                <van-cell title="评论" :value="num" is-link @click="$router.push({name:'score',query:{commentList:commentList}})" />
            </div>
            <br>

            <div v-for="(comment, index) in commentList" :key="comment.id"> 
                <div>
                    <van-row>
                        <van-col span="3" >
                            <van-image
                            round
                            width="1.5rem"
                            height="1.5rem"
                            :src="comment.icon"
                            v-if="index < 1"
                            />
                        </van-col>
                        <van-col span="8" style="margin: 10px -10px;">
                            <span  v-if="index < 1" ><b>{{ comment.nickName }}</b></span>
                        </van-col>
                        <van-col span="8" style="margin: 10px 0px 10px 90px">
                            <span  v-if="index < 1" style="margin-left: 50px;">{{ comment.createTime }}</span> 
                        </van-col>
                    </van-row>
                </div>

                <br>

                <div style="margin-left: 20px;"> 
                    <van-rate v-model="comment.score" allow-half void-icon="star" void-color="#eee" v-if="index < 1"/>
                </div>

                <br>

                <div style="margin-left: 20px;"> 
                    <span v-if="index < 1">{{ comment.remarks }}</span>
                </div>

            </div>
            
            <div style="text-align: center;"> 
               <van-button round type="default" size="small" @click="$router.push({name:'score',query:{commentList:commentList}})">查看更多</van-button>
            </div>

            

        </div>
        
        <div> 
            <van-goods-action>
                <van-goods-action-icon icon="cart-o" text="购物车" :badge="sum" to="carts"/>
                <van-goods-action-button
                    type="danger"
                    text="加入购物车"
                    @click="popup"
                />
            </van-goods-action>
        </div>

        <div> 
            <van-action-sheet v-model="show" cancel-text="确定" @cancel="onCancel">
               
                <van-row>
                    <van-col span="8">
                        <div style="width: 110px; padding: 16px 16px 200px;" >
                            <van-image
                                width="100"
                                height="100"
                                :src="goods.imgUrl"
                                />
                            
                        </div>
                    </van-col>
                    <van-col span="8">
                        <div style="text-align: center; margin: 40px 0px 0px -20px;">
                            <span style="color: red;font-size: 20px;"><b>￥：{{ goods.price }}</b></span>
                            <br>
                            <span>库存：{{ goods.count }}</span>
                        </div>
                        
                        <div style="text-align: center; margin: 10px 50px 0px 0px;"> 
                            <span><b>数量：</b></span>
                        </div>
                    </van-col>
                    <van-col span="8">
                        <div style="    text-align: center;padding-top: 95px;">
                            <van-stepper v-model="sum" theme="round" button-size="22" disable-input />
                        </div>
                        
                    </van-col>
                </van-row>
                
            </van-action-sheet>
        </div>
        

        
        
    </div>
</template>

<script>
import 'vant/lib/index.css'
import { GoodsAction, GoodsActionIcon, GoodsActionButton, Swipe, SwipeItem, NoticeBar, Cell, CellGroup, Image as VanImage,
    Button, Rate, NavBar, Col, Row, ActionSheet , Stepper, Toast  } from 'vant';
export default {
    components:{
        [GoodsAction.name]:GoodsAction,
        [GoodsActionIcon.name]:GoodsActionIcon,
        [GoodsActionButton.name]:GoodsActionButton,
        [Swipe.name]:Swipe,
        [SwipeItem.name]:SwipeItem,
        [NoticeBar.name]:NoticeBar,
        [Cell.name]:Cell,
        [CellGroup.name]:CellGroup,
        [VanImage.name]:VanImage,
        [Button.name]:Button,
        [Rate.name]:Rate,
        [NavBar.name]:NavBar,
        [Col.name]:Col,
        [Row.name]:Row,
        [ActionSheet .name]:ActionSheet ,
        [Stepper.name]:Stepper,
        [Toast.name]:Toast,
    },
    data(){
        return{
            sum:'',
            goods:'',
            id:'',
            imgs:[],
            num:'',
            commentList:[],
            show:false,
        }
    },
    methods:{

        queryGoodsById(){
            let phone = sessionStorage.getItem('phone')
            this.$axios.get('/api/app/goodsReception/queryGoods?id='+this.id+'&phone='+phone)
                .then(res=>{
                    console.log(res.data)
                    if(res.data.code == 200){
                        this.goods = res.data.data;
                    }
                })
        },

        queryImageByGoodsId(){

            let phone = sessionStorage.getItem('phone')
            
            this.$axios.get('/api/app/image/queryImage?goodsId='+this.id+'&phone='+phone)
                .then(res=>{
                    console.log(res.data)
                    if(res.data.code == 200){
                        this.imgs = res.data.data;
                    }
                })
        },

        queryCommentCount(){
            this.$axios.get('/api/app/comment/queryCommentCount?goodsId='+this.id)
                .then(res=>{
                    console.log(res.data)
                    if(res.data.code == 200){
                        this.num = "(" + res.data.data +")";

                    }
                })
        },

        queryComment(){
            this.$axios.get('/api/app/comment/queryComment?goodsId='+this.id)
                .then(res=>{
                    console.log(res.data)
                    if(res.data.code == 200){
                        this.commentList = res.data.data;
                    }
                })
        },

        popup(){
            this.show = true;
        },

        onCancel(){
            let phone = sessionStorage.getItem('phone');
            if(phone == null){
                Toast.fail("请先登录");
            }else{
                let carts = {};
                carts.cartsNum =this.sum;
                carts.goodsId=this.goods.id;
                carts.price=this.goods.price;
                carts.phone=phone;
                this.$axios.post('/api/app/addUserCarts',carts)
                    .then(res=>{
                        if(res.data.code == 200){
                            Toast.success('添加成功');
                        }
                    })
            }
        }


    },
    created(){
        this.id = this.$route.query.id;
        console.log(this.id);
        this.queryGoodsById();
        this.queryImageByGoodsId();
        this.queryCommentCount();
        this.queryComment();
    }
}
</script>

<style>
.yanse{
    background-color: white;
}

</style>